<template>
	<view
		class="nav-tabbar_back"
		:style="'background: rgba(255,255,255,' + bgOpacity + ');color:' + fontColor + ';padding-top:' + getBgOpacity + 'px'"
		:class="bgOpacity >= 1 ? 'black' : ''"
	>
		<!-- <text class="nav-tabbar_iconfont" @tap="back">
			<image class="img" src="/static/image/backJian.png" mode=""></image>
		</text> -->
		<!-- <image src="" mode=""></image> -->
		<view class="nav-tabbar_iconfont" @tap="back">
			<image class="img" :src="backImg" mode=""></image>
		</view>
		<view class="nav-tabbar_tittle">{{ hiddenTitle ? '' : tabbarTitle }}</view>
		<!-- <image class="nav-tabbar_img" :src="rightImg" mode="" @click="rightHead"></image> -->
		<slot></slot>
	</view>
</template>

<script>
export default {
	props: {
		backImg:{
			type:String,
			default:'/static/back.png'
		},
		bgOpacity: {
			type: Number,
			default: 0
		},
		statusBarHeight: {
			type: Number,
			default: 25
		},
		tabbarTitle: {
			type: String,
			default: 'Moly之约'
		},
		hiddenTitle: {
			type: Boolean,
			default: false
		},
		fontColor: {
			type: String,
			default: '#ffffff'
		}
	},
	data() {
		return {};
	},
	onLoad() {},
	computed: {
		getBgOpacity() {
			// #ifdef APP-PLUS || MP
			return uni.getSystemInfoSync().statusBarHeight || this.statusBarHeight;
			// #endif
			// #ifdef H5
			return 0;
			// #endif
		}
	},
	methods: {
		back() {
			uni.navigateBack({});
		}
	}
};
</script>

<style lang="scss">
	.nav-tabbar_back {
		position: fixed;
		top: 0;
		width: 100%;
		color: #fff;
		display: flex;
		font-weight: 0;
		font-size: 46upx;
		z-index: 9999 !important;
		.nav-tabbar_iconfont {
			box-sizing: content-box;
			padding: 0 20upx;
			width: 60upx;
			line-height: 44px;
			.img {
				width: 28rpx;
				height: 28rpx;
			}
		}
		.nav-tabbar_tittle {
			line-height: 44px;
			width: calc(100% - 200upx);
			text-align: center;
			font-size: 36upx;
			font-weight: bold;
		}
		.nav-tabbar_img{
			width: 32rpx;
			height: 32rpx;
			margin: 35rpx 0 0 50rpx;
		}
	}
	.nav-tabbar_back.black {
		color: #333;
	}
</style>
